<template>
  <CommonCard>
    <template #card-content>
      <v-md-preview :text="markdownContent"></v-md-preview>
    </template>
  </CommonCard>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import CommonCard from '@/components/card/CommonCard.vue';
import { mdContextEnum } from '@/types/common.type';
const route = useRoute();

const markdownContent = ref('');
const loadMarkdownFile = async (path: string) => {
  try {
    const response = await fetch(path);
    if (!response.ok) {
      throw new Error(`Failed to load Markdown file: ${response.statusText}`);
    }
    const text = await response.text();
    console.log('text', text);
    markdownContent.value = text;
  } catch (error) {
    console.error('Failed to load Markdown file:', error);
    markdownContent.value = 'Failed to load content.';
  }
};

onMounted(() => {
  const fullPath = route.fullPath as keyof typeof mdContextEnum;
  if (mdContextEnum[fullPath]) {
    //
    loadMarkdownFile(mdContextEnum[fullPath]);
  }
});
</script>
<style lang="scss" scoped></style>
